<!--
 * @Description:
 * @version:
 * @Author: 娃哈哈
 * @Date: 2024-12-25 15:53:02
-->
<template>
    <div class="swiper">
        <div class="banner">
            <div class="top">
                <ul :style="{ left: offsetTop + 'px' }">
                    <li class="top-item" v-for="(item,index) in items" :key="index">
                        <div class="top-image">
                            <el-image
                                style="width: 180px; height: 100px"
                                :src="item.image"
                                :preview-src-list="[item.image]"
                                :preview-teleported="true"
                            />
                        </div>
                        <p class="top-name">
                            <el-tooltip
                                :content=" item.text"
                                placement="top"
                            >
                                {{ item.name }}
                            </el-tooltip>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="switch">
                <div class="arrow" @click="left"></div>
                <div class="line">
                    <ul :style="{ left: offset + 'px' }">
                        <li v-for="(item,index) in items" :key="index">
                            <div class="dot">
                                <div class="label">0{{ index + 1 }}</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="arrow" @click="right"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref,computed  } from 'vue'

export default {
    name: 'Timeline',
    props: {
        items: {
            type: Array,
            required: true
        }
    },
    setup(props) {
        const offset = ref(0) // 记录偏移量
        const offsetTop = ref(0) // 记录偏移量
        const visibleItems = 2 // 每次可见的图片数量
        const itemWidthTop = 242 // 图片单个项目宽度
        const itemWidth = 211 // 线条单个项目宽度
        const maxOffsetTop = computed(() => -(props.items.length - visibleItems) * itemWidthTop)
        const maxOffset = computed(() => -(props.items.length - visibleItems) * itemWidth)

        const left = () => {
            // 如果未到最左侧，向左移动
            if (offsetTop.value < 0) {
                offsetTop.value += itemWidthTop
          }
            if (offset.value < 0) {
                offset.value += itemWidth
            }
        }

        const right = () => {
            // 如果未到最右侧，向右移动
            if (offsetTop.value > maxOffsetTop.value) {
                offsetTop.value -= itemWidthTop
          }
            if (offset.value > maxOffset.value) {
                offset.value -= itemWidth
            }
        }

        return {
            offset,
            offsetTop,
            left,
            right
        }
    }
}
</script>
<style scoped lang="less">
.swiper {
    font-family: BaseText-Regular, DINPro-Regular, serif;
    padding-top: 5px;
    height: 234px;
    box-sizing: border-box;
    .banner {
        .top {
          position: relative;
          height: 165px;
          overflow: hidden;
            ul {
                margin-bottom: 6px;
                text-align: center;
                position: absolute;
                left: 0;
                display: flex;
                justify-content: space-around;
                transition: left 0.5s ease; /* 平滑移动效果 */
                li {
                    margin: 0 30px;
                    .top-name {
                        width: 90%;
                        margin: 0 auto;
                        margin-top: 4px;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }
            }
        }
        .switch {
            display: flex;
            align-items: center;
            .arrow {
                border: 12px solid transparent;
                transform: translateY(-5px);
                cursor: pointer;
                &:first-child {
                    border-right: 12px solid #527ff3;
                }
                &:last-child {
                    border-left: 12px solid #527ff3;
                }
            }
            .line {
                position: relative;
                display: flex;
                justify-content: space-around;
                width: 100%;
                height: 47px;
                flex-grow: 1;
                overflow: hidden;
                ul {
                    height: 3px;
                    display: flex;
                    justify-content: space-around;
                    background-color: #527ff3;
                    transform: translateY(17px);
                    margin-bottom: 6px;
                    text-align: center;
                    position: absolute;
                    left: 0;
                    transition: left 0.5s ease;
                    li {
                        width: 211px;
                        text-align: center;
                        .dot {
                            width: 10px;
                            height: 10px;
                            margin: 0 auto;
                            border-radius: 50%;
                            border: 2px solid #527ff3;
                            background-color: #fff;
                            transform: translateY(-4px);
                            .label {
                                position: absolute;
                                width: 90px;
                                bottom: -26px;
                                left: -40px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
